<template>
	<view class="mine-page">
		<view class="top-bg"></view>
		
		<view class="info-box">
			<view class="userName" v-if="userInfo.userName">
				{{userInfo.userName}}
			</view>
			<view style="width: 60%; margin: 0 auto;" v-else>
				<view>
					<u-button
						@click="loginShow = true"
						type="error" 
						text="点击登录"
						:plain="true"
						shape="circle"
					></u-button>
				</view>
			</view>
		</view>
		
		<u-modal :show="loginShow" 
		title="登录/注册"
		:showCancelButton="true"
		confirmText="登录/注册"
		cancelText="游客登录"
		@confirm="submitForm"
		@cancel="loginShow = false"
		@close="loginShow = false"
		>
			<view class="slot-content" style="width: 100%;">
				<u-form 
					labelPosition="left"
					labelWidth="80"
					:model="form"
					:rules="rules"
					ref="uForm"
				>
					<u-form-item
						label="手机号"
						prop="mobile"
					>
						<u--input
							v-model="form.mobile"
							border="bottom"
							placeholder="请输入手机号"
						></u--input>
					</u-form-item>
				
				</u-form>
			</view>
		</u-modal>
		
		<view style="width: 90%; margin: 25px auto;">
			<view class="menu_item" @click="toFunc">
				<view class="menu_item_left">
					<view>
						<u-icon name="grid-fill" size="20"></u-icon>
					</view>
					<view style="margin-left: 4px; font-size: 15px;">
						功能介绍
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="btn_box" v-if="userInfo.userName">
			<u-button 
				@click="loginOut"
				type="error" 
				text="退出登录"
				:plain="true"
				shape="circle"
			></u-button>
		</view>
		
		
		<tabbarCom :current="3"></tabbarCom>
	</view>
</template>

<script>
	import tabbarCom from "../../components/tabbar/tabbar.vue"
	import { addUser } from "../../config/api.js"
	export default {
		components: {
			tabbarCom
		},
		data() {
			return {
				form:{
					mobile: ""
				},
				userInfo: {
					userName: "",
				},
				loginShow: false,
				rules: {
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						},
					]
				}
			}
		},
		onReady() {
			//  #ifdef MP-WEIXIN
				this.$refs.uForm.setRules(this.rules)
			// #endif
		},
		onLoad() {
			const that = this;
			const info = uni.getStorageSync("userInfo");
			if(info){
				that.userInfo = info;
			}
			
		},
		methods: {
			loginOut(){
				const that = this;
				uni.removeStorageSync("userInfo");
				that.userInfo.userName = "";
			},
			submitForm(){
				const that = this;
				that.$refs.uForm.validate().then(res => {
					addUser({
						"phoneNum": that.form.mobile
					}).then(res => {
						uni.setStorageSync("userInfo", res.data);
						that.userInfo.userName="用户#"+that.form.mobile
						that.loginShow = false;
					})
				}).catch(errors => {
					
				})
			},
			getLoginUserPhone(e){
				const that = this;
				var detail = e.detail;
				if (detail.errMsg == "getPhoneNumber:ok") {
					
				}else{
					console.log("拒绝！");
				}
			},
			toFunc(){
				uni.navigateTo({
					url:"/pages/mine/funcDetial"
				})
			},
		}
	}
</script>

<style>
.top-bg{
	height: 150px; 
	background-color: #f56c6c;
}

.info-box{
	margin: -80px auto 0 auto; 
	width: 90%; 
	background-color: #f8f8f8;
	padding: 10px 15px; 
	box-sizing: border-box; 
	border-radius: 8px; 
	height: 100px;
	display: flex; 
	align-items: center;
	justify-content: flex-start;
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}

.userName{
	color: #616161; 
	margin-left: 8px; 
	font-size: 14px;
}

.menu_item{
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
	padding: 10px 10px; 
	box-sizing: border-box; 
	border-radius: 5px;
}

.menu_item_left{
	flex: 1; 
	display: flex; 
	align-items: center;
}

.btn_box{
	margin: 0 auto;
	width: 60%;
}

</style>
